<template>
    <div class="wrap">
        <div class="table-main">
<!--            <el-button type="primary" size="mini" @click="resetDateFilter" icon="el-icon-delete">清除日期过滤器</el-button>-->
<!--            <el-button type="primary" size="mini" @click="clearFilter" icon="el-icon-delete">清除所有过滤器</el-button>-->
            <div class="select">
                <el-input maxlength="11" style="width: 180px;margin-left: 20px" placeholder="请输入手机号" type="text"
                          size="small"
                          v-model.trim="selectPhone" @keyup.enter.native="getByPhone"/>
                <el-button type="primary" size="mini" @click="getByPhone" icon="el-icon-search">查询</el-button>
            </div>
            <el-table
                    size="small"
                    ref="filterTable"
                    :data="tableData">
                <el-table-column
                        prop="time"
                        label="订单日期"
                        sortable
                        width="260"
                        column-key="date"
                        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                >
                </el-table-column>
                <el-table-column
                        prop="courseId"
                        label="课程ID"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="coach"
                        label="教练"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="memberPhone"
                        label="消费手机号"
                        width="200">
                </el-table-column>

                <el-table-column
                        prop="price"
                        label="消费价格(￥元)"
                        width="180">
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {listByPage, getByPhone} from "@/utils/apis/courseOrder";
    import filter from "@/utils/filter";

    export default {
        name: "CourseList",
        data() {
            return {
                current: 1,
                total: 0,
                selectPhone: '',
                tableData: []
            }
        },
        created() {
            const loading = this.$loading({
                lock: true,
                text: '更新数据.......',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'

            })
            this.handleCurrentChange(1)

            loading.close()
        },
        methods: {
            //更新表格数据
            updateFormData(val) {
                const data = val.data.data
                this.total = data.total
                console.log(val.data.data)
                this.tableData = data.records
                this.tableData.forEach(item => {
                    item.time = filter.formatDate(item.time, 'yyyy-M-d H:m:s')

                })
            },
            async handleCurrentChange(val) {
                this.current = val
                const res = await listByPage(this.current, 10)
                console.log(res.data.data)
                this.updateFormData(res)
            },
            //根据手机号查询订单
            getByPhone() {
                if (this.selectPhone==""){
                    this.handleCurrentChange(1)
                    return
                }
                if (!/^1(3|4|5|6|7|8)\d{9}$/.test(this.selectPhone)){
                    this.$message.warning('手机号格式不正确')
                    return;
                }
                this.current = 1
                getByPhone(this.selectPhone, this.current, 10, ).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success('查询成功')
                        this.updateFormData(res)
                    }
                })
            },
            resetDateFilter() {
                this.$refs.filterTable.clearFilter('date');
                console.log(".........")
                console.log(this.resetDateFilter())
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
                this.handleCurrentChange(1)
                this.selectPhone = ''
                console.log(".........")
                console.log(this.clearFilter())
            },

        }
    }
</script>

<style scoped>

    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .table-main {
        width: 960px;
    }

    .select {
        width: 264px;
        float: right;
        display: flex;
        justify-content: space-between;
    }

    .block {
        padding-top: 50px;
        margin-right: 70px;
    }
</style>